<template>
  <div>
  	<top-bar title="我的订单" titleShow="true">
      <div class="date gfc-grey1" slot="r-btn">日期</div>
    </top-bar>
  	<div class="content order con-bg">
  	<ul class="menu items-aro">
  		<li :class="{active: positionShow}" @click="menuCtr('positionShow')">持仓</li>
  		<li :class="{active: pendingShow}"  @click="menuCtr('pendingShow')">挂单</li>
  		<li :class="{active: historyShow}" @click="menuCtr('historyShow')">历史</li>
  	</ul>
    <!-- 账户详情统计 -->
  	<div class="profit-count">
	  	<dl>
	  		<dd>浮动收益<span class="pull-right gfc-green">$25555.55</span></dd>
	  		<dd>净值<span class="pull-right gfc-grey2">$225</span></dd>
	  	</dl>
	  	<dl v-if="profitOpen">
	  		<dd>可用保证金<span class="pull-right gfc-grey2">$54545.33</span></dd>
	  		<dd>已用保证金<span class="pull-right gfc-grey2">$65444.22</span></dd>
	  		<dd>总收益<span class="pull-right gfc-green">$25.23</span></dd>
	  		<dd>余额<span class="pull-right gfc-yellow">$9999.09</span></dd>
	  	</dl>
	  	<div class="ctr-icon" :class="{active:profitOpen}" @click="profitOpen=!profitOpen"></div>
  	</div>
  	<!-- 持仓 -->
  	<ul class="order-list" v-if="positionShow">
      <li v-for="(item,index) in positionData">
  			<ul class="order-nomal items-bet" @click="orderOpen=!orderOpen">
  				<li>
  					<p><span class="type">{{item.symbol}}</span><i>{{item.symbol}}</i></p>
  					<p><span class="buy">买</span>{{item.volume}}手</p>
  					<p class="data">4分钟前</p>
  				</li>
  				<li>
  					<p class="gfc-green">$-21233</p>
  					<p>收益率: <i class="gfc-grey2">20%</i></p>
  					<p><i class="gfc-grey2">1222.25-</i><i class="gfc-orange">1233.60</i></p>
  				</li>
  				<li class="vertical-center">
  					<button class="btn-transparent gfc-orange2" @click="blockBub">平仓</button>
  				</li>
  			</ul>
  			<dl class="order-open" v-if="orderOpen">
  				<dd>订单号 {{item.order_code}} <span class="pull-right gfc-orange">自主下单</span></dd>
  				<dd>止损: <i class="gfc-green">{{item.tp}}</i> <span class="pull-right">开仓时间 : <i class="gfc-grey2">{{item.open_time}}</i></span></dd>
  				<dd><i class="gfc-orange">止盈: {{item.sl}}</i><span class="pull-right">利息 <i class="gfc-orange2">$52</i></span></dd>
  			</dl>
			<div class="items-bet" v-if="orderOpen">
				<button>设置止损</button>
				<button>设置止盈</button>
			</div>
  		</li>
  	</ul>
  	<!-- 挂单 -->
  	<ul class="order-list" v-if="pendingShow">
  		<li>
  			<ul class="order-nomal items-bet">
  				<li>
  					<p><span class="type">XAU/USD</span><i>XAU/USD</i></p>
  					<p><span class="buy">买</span>0.01手</p>
  					<p class="data">4分钟前</p>
  				</li>
  				<li>
  					<p></p>
  					<!-- <p>$+21233</p> -->
  					<p class="gfc-white align-r">挂单中</p>
  					<p><i class="gfc-grey2">1222.25-</i><i class="gfc-orange">1233.60</i></p>
  				</li>
  				<li class="vertical-center">
  					<button class="btn-transparent gfc-orange2">撤销</button>
  				</li>
  			</ul>
  		</li>
  		<li>
  			<ul class="order-nomal items-bet">
  				<li>
  					<p><span class="type">XAU/USD</span><i>XAU/USD</i></p>
  					<p><span class="sell">卖</span>0.01手</p>
  					<p class="data">4分钟前</p>
  				</li>
  				<li>
  					<p></p>
  					<!-- <p>$-21233</p> -->
  					<p class="gfc-white align-r">挂单中</p>
  					<p><i class="gfc-grey2">1222.25-</i><i class="gfc-orange">1233.60</i></p>
  				</li>
  				<li class="vertical-center">
  					<button class="btn-transparent gfc-orange2">撤销</button>
  				</li>
  			</ul>
  		</li>
  	</ul>
  	<!-- 历史 -->
  	<ul class="order-list" v-if="historyShow">
  		<li>
  			<ul class="order-nomal items-bet" @click="orderOpen=!orderOpen">
  				<li>
  					<p><span class="type">XAU/USD</span><i>XAU/USD</i></p>
  					<p><span class="sell">卖</span>0.01手</p>
  					<p class="data">4分钟前</p>
  				</li>
  				<li>
  					<p class="gfc-orange2">$+21233</p>
  					<p>收益率: <i class="gfc-grey2">20%</i></p>
  					<p><i class="gfc-grey2">1222.25-</i><i class="gfc-orange">1233.60</i></p>
  				</li>
  			</ul>
  			<dl class="order-open" v-if="orderOpen">
  				<dd>订单号 9735722 <span class="pull-right gfc-orange">跟随下单</span></dd>
  				<dd>止损: <i class="gfc-green">394.996</i> <span class="pull-right">开抢时间 : <i class="gfc-grey2">2017/07/06 09:25:27</i></span></dd>
  				<dd><i class="gfc-orange">止盈: 394.996</i> <span class="pull-right">平仓时间 : <i class="gfc-grey2">2017/07/06 09:25:27</i></span></dd>
  			</dl>
  		</li>
  		<li>
  			<ul class="order-nomal items-bet" @click="orderOpen=!orderOpen">
  				<li>
  					<p><span class="type">XAU/USD</span><i>XAU/USD</i></p>
  					<p><span class="buy">买</span>0.01手</p>
  					<p class="data">4分钟前</p>
  				</li>
  				<li>
  					<p class="gfc-green">$-21233</p>
  					<p>收益率: <i class="gfc-grey2">20%</i></p>
  					<p><i class="gfc-grey2">1222.25-</i><i class="gfc-orange">1233.60</i></p>
  				</li>
  			</ul>
  			<dl class="order-open" v-if="orderOpen">
  				<dd>订单号 9735722 <span class="pull-right gfc-orange">跟随下单</span></dd>
  				<dd>止损: <i class="gfc-orange">394.996</i> <span class="pull-right">开抢时间 : <i class="gfc-grey2">2017/07/06 09:25:27</i></span></dd>
  				<dd><i class="gfc-green">止盈: 394.996</i> <span class="pull-right">平仓时间 : <i class="gfc-grey2">2017/07/06 09:25:27</i></span></dd>
  			</dl>
  		</li>
  	</ul>
  	</div>
  </div>
</template>

<script>
  import topBar from '../../components/topBar/topBar.vue'
  export default {
    data() {
      return {
        positionShow: true,	//持仓
        pendingShow: false,	//挂单
        historyShow: false,	//历史
        orderOpen: false,	//订单详情
        profitOpen: false, 	//收益详情
        profitCountData: [],
        positionData: [{  //持仓列表
            account_id: 0,
            mt4_account: 0,
            order_code: "0000000",
            symbol: "abc",
            digits: "123",
            cmd: 1,
            volume: 0,
            open_time: "00/00/00 00:00",
            open_price: "$00.00",
            sl: "$00.00",
            tp: "$00.00",
            close_time: "1970-01-01 00:00:00",
            close_price: "$00.00",
            commission: "$00.00",
            profit: "",
            source: "",
            dealer_id: "",
            dealer_type: "",
            tactic_flag: "",
            trade_id: "",
            request_ip: "",
            active: "",
            created_at: "",
            updated_at: ""
          },{
            account_id: 0,
            mt4_account: 0,
            order_code: "0000000",
            symbol: "abc",
            digits: "123",
            cmd: 1,
            volume: 0,
            open_time: "00/00/00 00:00",
            open_price: "$00.00",
            sl: "$00.00",
            tp: "$00.00",
            close_time: "1970-01-01 00:00:00",
            close_price: "$00.00",
            commission: "$00.00",
            profit: "",
            source: "",
            dealer_id: "",
            dealer_type: "",
            tactic_flag: "",
            trade_id: "",
            request_ip: "",
            active: "",
            created_at: "",
            updated_at: ""
          }]
      }
    },
    components: {
      topBar
    },
    methods: {
    	menuCtr: function(menuName) {
    		switch(menuName){
    			case "positionShow": this.positionShow = true; this.pendingShow = false; this.historyShow = false;
    			break;
    			case "pendingShow": this.pendingShow = true; this.positionShow = false; this.historyShow = false;
    			break;
    			case "historyShow": this.historyShow = true; this.pendingShow = false; this.positionShow = false;
    			break;
    		}
    	},
    	blockBub: function(event){
    		event.stopPropagation();
    	}
    },
    mounted(){
      var _this = this;
      //账户收益统计
      this.asyncHttp('get', '/api/accounts', {
        id: 1
      },function(data){
        console.log(data)
        // if (data.trades.length != 0) {
        //   _this.profitCountData = data.trades
        // };
        console.log(_this.profitCountData)

      },function(){

      })
      // 持仓列表
      this.asyncHttp('get', '/api/trades', {
        account_id: 1,
        type: 2
      },function(data){
        if (data.trades.length != 0) {
          _this.positionData = data.trades
        };
        // console.log(_this.positionData)

      },function(){

      })
    }
  }
</script>

<style scoped>
  .top-bar .date {
    position: absolute;
    top: 0;
    right: .18rem;
    font-size: .18rem;
    height: .44rem;
    line-height: .44rem;
  }
.content.order {
	background: #22272D;
}
.order {
	color: #6A747F;
	font-size: .16rem;
}
.menu {
	font-size: .18rem;
	color: #fff;
	text-align: center;
	/* background: #22272D; */

}
.data {
	font-size: .12rem;
}
dl {
	overflow: hidden;
}
dl dd {
	line-height: .13rem;
	height: .13rem;
	margin-top: .2rem;
}
p {
	line-height: .13rem;
	height: .13rem;
	margin-top: .2rem;
}
.menu li {
	padding: .13rem 0;
	flex: 1;
	color: #6A747F;
}
.menu li.active {
	color: #fff;
	border-bottom: .02rem solid #F25E44;
}

.profit-count {
	position: relative;
	padding: 0 .49rem .16rem .18rem;
	background:  #282F37;
}
.profit-count .ctr-icon {
	width: .13rem;
	height: .127rem;
	right: .18rem;
	top: .343rem;
	position: absolute;
	background: url(../../assets/icon-ctr-down.png) no-repeat center/contain;
}
.profit-count .ctr-icon.active {
	background: url(../../assets/icon-ctr-up.png) no-repeat center/contain;
}
.order-list>li {
	padding: 0 .18rem .16rem .18rem;
	background:  #282F37;
	margin-top: .1rem;
}
.order-nomal .type, .order-nomal .sell, .order-nomal .buy {
	text-align: center;
	display: inline-block;
	border-radius: .05rem;
}
.order-nomal .type{
	width: .48rem;
	height: .24rem;
	line-height: .24rem;
	background: #fff;
	color: #161616;
	font-size: .08rem;
	margin-right: .18rem;
}
.order-nomal .sell,.order-nomal .buy {
	line-height: .18rem;
	width: .4rem;
	height: .18rem;
	font-size: .12rem;
	color: #fff;
	margin-right: .2rem;
}
.order-nomal .sell {
	background: #03D396;
}
.order-nomal .buy {
	background: #F25E44;
}
.order-open {
	border-top: .01rem solid #333A42;
	padding-bottom: .16rem;
	margin-top: .2rem;
}
button {
	background: #F25E44;
	border-radius: .05rem;
	width: 1.2rem;
	height: .4rem;
	color: #fff;
	font-size: .16rem
}
.btn-transparent {
	font-size: .13rem;
	width: .8rem;
	height: .3rem;
	line-height: .13rem;
	border: .01rem solid #F25E44;
	background: rgba(0,0,0,0);
}
</style>
